<template>
<ul class="todo-main">
    <Item v-for="(todo, index) in todos" :index="index" :key="todo.id" :todo="todo" :updateTodo="updateTodo" :deleteTodo="deleteTodo"/>
</ul>
</template> 
<script lang="ts">
import { defineComponent, ref } from 'vue'
import Item from './Item.vue'
export default defineComponent ({
    name: 'list',
    props: ['todos', 'deleteTodo', 'index', 'updateTodo'],
    components: {
        Item
    },
    setup() {
        
    }
})

</script>


<style scoped>
/* main */
.todo-main {
	margin-left: 0px;
	border: 1px solid #ddd;
	border-radius: 2px;
	padding: 0;
}

.todo-empty {
	height: 40px;
	line-height: 40px;
	border: 1px solid #ddd;
	border-radius: 2px;
	padding-left: 5px;
	margin-top: 10px;
}
</style>